<!--第二种组Button样式，蓝底-->
<script setup lang="ts">
import { reactive } from "vue";

const emit = defineEmits<{
  //定义一个回调方法，可以理解为回调父组件传入的attribute为ccc的方法，入参为一个number类型的变量
  (e: 'ccc', num: number,upRoute:boolean): void,
}>()
function toggleSelected(index:number) {
  buttons.forEach((e)=>{
    e.selected= false;
  })
  buttons[index].selected = !buttons[index].selected;
  emit('ccc', index,true);
}

const props = defineProps(['buttons'])
// 将传入的 props.buttons 转换为一个响应式 ref
const buttons = reactive([...props.buttons]);

</script>

<template>
  <div style="display: flex;flex-direction: row;  border-radius: 6px 6px 6px 6px;  border: 1px solid #11588C; /* 左上角大弧度圆角 */">
  <div v-for="(item, index) in buttons" :key="index" class="main">
      <button
          class="custom-button"
          :class="{ selected: item.selected,'border_left_right':index==(buttons.length-1)}"
          @click="toggleSelected(index)"
      >{{item.label}}
      </button>
    <div v-if="!(index==buttons.length-1)" style="width: 1px;height: 30px;align-items: center;background: #599AC9"></div>
  </div>
  </div>
</template>

<style scoped>

.main{
  align-items: center;/*垂直居中对齐*/
  height: 64px;
  width: max-content;
  display: flex;
  flex-direction: row;
}

.custom-button {
  border-radius: 6px 6px 6px 6px; /* 左上角大弧度圆角 */
  background-color: transparent; /* 默认背景色 */
  color: #666666; /* 默认字体颜色 */
  cursor: pointer; /* 鼠标悬停时显示为小手图标 */
  transition: background-color 0.3s, color 0.3s; /* 平滑过渡效果 */
  height: 64px;
}

/* 选中状态（假设你使用 JavaScript 来切换这个类名） */
.custom-button.selected {
  background-color: #11588C; /* 选中时的背景色 */
  color: white; /* 选中时的字体颜色 */
}

/* 可选：添加焦点样式（当你使用 div 并且设置 tabindex 时） */
.custom-button:focus {
  outline: none; /* 去除默认的焦点轮廓 */
  box-shadow: 0 0 0 0.5px #ffffff; /* 自定义焦点效果 */
}
.rounded-left {
  /* 左上角大弧度圆角 */
  border-radius: 0 0 0 0; /* 注意这里我们只设置了左上角的圆角 */
}


/*左右边框*/
.border_left_right{
  border-right-color: transparent;
}

</style>